<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>仿王者荣耀官方网站-世界观</title>
    <link rel="stylesheet" href="../style/reset.css" />
    <link rel="stylesheet" href="../style/common.css" />
    <link rel="stylesheet" href="../style/page/world-views.css" />
  </head>
  <body>
    <div class="page-world-views">
      <div class="bg">
        <img src="../img/world-views/bg.jpg" alt="">
      </div>
      <div class="left-area">
        <div class="vertical-menu vertical-menu--dark">
          <div class="vertical-menu__title vertical-menu__title--world">世界观</div>
          <div class="vertical-menu__item active">
            <a href="#" class="btn">地区</a>
          </div>
          <div class="vertical-menu__item">
            <a href="#" class="btn">英雄</a>
          </div>
          <div class="vertical-menu__item">
            <a href="#" class="btn">皮肤</a>
          </div>
          <div class="vertical-menu__item">
            <a href="#" class="btn">动画</a>
          </div>
        </div>
      </div>
      <div class="right-area">
        <div class="content">
          <div class="item item--01">
            <img src="../img/world-views/img-01.png" alt="">
            <div class="item__info">
              <p>蛮荒之漠 希望永存</p>
              <p class="item__title">沙海</p>
            </div>
          </div>
          <div class="item item--02">
            <img src="../img/world-views/img-02.png" alt="">
            <div class="item__info">
              <p>文明为火 千窟为佑</p>
              <p class="item__title">千窟城</p>
            </div>
          </div>
          <div class="item item--03">
            <img src="../img/world-views/img-03.png" alt="">
            <div class="item__info">
              <p>天穹摇篮 森之秘境</p>
              <p class="item__title">云梦泽</p>
            </div>
          </div>
          <div class="item item--04">
            <img src="../img/world-views/img-04.png" alt="">
            <div class="item__info">
              <p>以奇迹始 以诅咒终</p>
              <p class="item__title">海都</p>
            </div>
          </div>
          <div class="item item--05">
            <img src="../img/world-views/img-05.png" alt="">
            <div class="item__info">
              <p>盛世传说 不朽之章</p>
              <p class="item__title">长安</p>
            </div>
          </div>
          <div class="item item--06">
            <img src="../img/world-views/img-06.png" alt="">
          </div>
          <div class="item item--07">
            <img src="../img/world-views/img-07.png" alt="">
            <div class="item__info">
              <p>机关盛世 万变之城</p>
              <p class="item__title">长安 · 机关</p>
            </div>
          </div>
          <div class="item item--08">
            <img src="../img/world-views/img-08.png" alt="">
            <div class="item__info">
              <p>云雾散尽日 长帆济海时</p>
              <p class="item__title">江郡</p>
            </div>
          </div>
          <div class="item item--09">
            <img src="../img/world-views/img-09.png" alt="">
            <div class="item__info">
              <p>自己告诉自己真理</p>
              <p class="item__title">稷下学院</p>
            </div>
          </div>
          <div class="item item--10">
            <img src="../img/world-views/img-10.png" alt="">
            <div class="item__info">
              <p>万民同乐 喧嚣夺筹</p>
              <p class="item__title">长安 · 鸿胪演武</p>
            </div>
          </div>
          <div class="item item--11">
            <img src="../img/world-views/img-11.png" alt="">
            <div class="item__info">
              <p>玉之温室 幻想之城</p>
              <p class="item__title">玉城</p>
            </div>
          </div>
          
        </div>
      </div>
      <div class="shortcut">
        <iframe src="./快捷图标.html" style="width: 330px; height: 130px;"></iframe>
      </div>
    </div>
  </body>
</html>
